<template>
  <Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`">
    <span :class="[prefixCls, `${prefixCls}--${theme}`]" class="flex">
      <img :class="`${prefixCls}__header`" :src="getAvatarUrl" />
      <span :class="`${prefixCls}__info hidden md:block`">
        <span :class="`${prefixCls}__name  `" class="truncate">
          {{ getUserInfo.organizationName+"-"+ getUserInfo.name }}
        </span>
      </span>
    </span>

    <template #overlay>
      <Menu @click="handleMenuClick">
        <MenuDivider v-if="getShowDoc" />
        <MenuItem
          key="password"
          :text="t('layout.header.dropdownItemSwitchPassword')"
          icon="ant-design:edit-outlined"
        />
        <MenuItem
          key="logout"
          :text="t('layout.header.dropdownItemLoginOut')"
          icon="ion:power-outline"
        />
      </Menu>
    </template>
  </Dropdown>
  <LockAction @register="register" />
  <DepartSelect ref="loginSelectRef" />
  <UpdatePassword ref="updatePasswordRef" />
</template>
<script lang="ts">
// components
import { Dropdown, Menu } from "ant-design-vue";

import { defineComponent, computed, ref } from "vue";

import { SITE_URL } from "/@/settings/siteSetting";

import { useUserStore } from "/@/store/modules/user";
import { useHeaderSetting } from "/@/hooks/setting/useHeaderSetting";
import { useI18n } from "/@/hooks/web/useI18n";
import { useDesign } from "/@/hooks/web/useDesign";
import { useModal } from "/@/components/Modal";
import { useMessage } from "/src/hooks/web/useMessage";
import { useGo } from "/@/hooks/web/usePage";
import headerImg from "/@/assets/images/header.jpg";
import { propTypes } from "/@/utils/propTypes";
import { openWindow } from "/@/utils";

import { createAsyncComponent } from "/@/utils/factory/createAsyncComponent";

import { DB_DICT_DATA_KEY } from "/src/enums/cacheEnum";
import { removeAuthCache, setAuthCache } from "/src/utils/auth";
import { getFileAccessHttpUrl } from "/@/utils/common/compUtils";

type MenuEvent = "logout" | "doc" | "lock" | "cache" | "depart";
const { createMessage } = useMessage();
export default defineComponent({
  name: "UserDropdown",
  components: {
    Dropdown,
    Menu,
    MenuItem: createAsyncComponent(() => import("./DropMenuItem.vue")),
    MenuDivider: Menu.Divider,
    LockAction: createAsyncComponent(() => import("../lock/LockModal.vue")),
    DepartSelect: createAsyncComponent(() => import("./DepartSelect.vue")),
    UpdatePassword: createAsyncComponent(() => import("./UpdatePassword.vue")),
  },
  props: {
    theme: propTypes.oneOf(["dark", "light"]),
  },
  setup() {
    const { prefixCls } = useDesign("header-user-dropdown");
    const { t } = useI18n();
    const { getShowDoc, getUseLockPage } = useHeaderSetting();
    const userStore = useUserStore();
    const go = useGo();

    const getUserInfo = computed(() => {
      const { name = "",organizationName="", id = "",avatar, desc } = userStore.getUserInfo || {};
      return { name,organizationName, avatar: avatar || headerImg, desc };
    });
    const getAvatarUrl = computed(() => {
      let { avatar } = getUserInfo.value;
      if (avatar == headerImg) {
        return avatar;
      } else {
        return getFileAccessHttpUrl(avatar);
      }
    });

    const [register, { openModal }] = useModal();
    /**
     * 多部门弹窗逻辑
     */
    const loginSelectRef = ref();
    function handleLock() {
      openModal(true);
    }

    //  login out
    function handleLoginOut() {
      userStore.confirmLoginOut();
    }

    // open doc
    function openDoc() {
      openWindow(SITE_URL);
    }

    // 切换部门
    function updateCurrentDepart() {
      loginSelectRef.value.show();
    }
    // 修改密码
    const updatePasswordRef = ref();
    function updatePassword() {
      updatePasswordRef.value.show(userStore.getUserInfo.name,userStore.getUserInfo.id);
    }

    function handleMenuClick(e: { key: MenuEvent }) {
          console.log('userStore', userStore);
    console.log('getUserInfo', getUserInfo);
    console.log('userStore.getUserInfo', userStore.getUserInfo);
    
      switch (e.key) {
        case "logout":
          handleLoginOut();
          break;
        case "doc":
          openDoc();
          break;
        case "lock":
          handleLock();
          break;
        case "depart":
          updateCurrentDepart();
          break;
        case "password":
          updatePassword();
          break;
        case "account":
          //update-begin---author:wangshuai ---date:20221125  for：进入用户设置页面------------
          go(`/system/usersetting`);
          //update-end---author:wangshuai ---date:20221125  for：进入用户设置页面--------------
          break;
      }
    }

    return {
      prefixCls,
      t,
      getUserInfo,
      getAvatarUrl,
      handleMenuClick,
      getShowDoc,
      register,
      getUseLockPage,
      loginSelectRef,
      updatePasswordRef,
    };
  },
});
</script>
<style lang="less">
@prefix-cls: ~"@{namespace}-header-user-dropdown";

.@{prefix-cls} {
  height: @header-height;
  padding: 0 0 0 10px;
  padding-right: 10px;
  overflow: hidden;
  font-size: 12px;
  cursor: pointer;
  align-items: center;

  img {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  &__header {
    border-radius: 50%;
  }

  &__name {
    font-size: 14px;
  }

  &--dark {
    &:hover {
      background-color: @header-dark-bg-hover-color;
    }
  }

  &--light {
    &:hover {
      background-color: @header-light-bg-hover-color;
    }

    .@{prefix-cls}__name {
      color: @text-color-base;
    }

    .@{prefix-cls}__desc {
      color: @header-light-desc-color;
    }
  }

  &-dropdown-overlay {
    .ant-dropdown-menu-item {
      min-width: 160px;
    }
  }
}
</style>
